
import { useIntervalFn } from '@vueuse/core'

import type { Meta, StoryObj } from '@storybook/vue3-vite';


const meta = {
  title: 'Hook/vueuse/useIntervalFn',
  tags: ['autodocs'],
  args: {},
} satisfies Meta<typeof useIntervalFn>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  name: '基础用法',
  args: {
    ...meta.args,
  },
  render: () => ({
    setup() {
      const count = ref(0)
      const { pause, resume, isActive } = useIntervalFn(() => {
        count.value++
      }, 1000, {
        immediate: false
      })
      return { count, pause, resume, isActive }
    },
    template: `
      <div>
        <p>Count: {{ count }}</p>
        <button @click="pause">Button-Pause</button><br>
        <button @click="resume">Button-Resume</button>
        <p>Status: {{ isActive ? 'Active' : 'Paused' }}</p>
      </div>
    `
  })
};